html {
  font-size: 15px;
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  background-color: #2c3e50;
}
$colors: #f1c40f, #9b59b6, #2980b9, #1abc9c, #f39c12, #b33771;

main {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center -100px;
  transform: perspective(900px);
  transition-duration: 2s;
  div {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: blueviolet;
    transform-origin: center center -100px;
    opacity: 0.6;
    @for $i from 1 to 5 {
      &:nth-child(#{$i}) {
        transform: rotateY(#{$i * 90}deg);
        background-color: nth($colors, $i);
      }
    }
    &:nth-child(5) {
      transform: rotateX(90deg);
      background-color: nth($colors, 5);
    }
    &:nth-child(6) {
      transform: rotateX(-90deg);
      background-color: nth($colors, 6);
    }
  }
}

body:hover {
  main {
    transform: perspective(900px) rotateY(345deg) rotateX(360deg);
  }
}
